<template>
  <view class="page page-grey has-fixed-footer page-coupon-supplier">
    <view class="page-fixed-top">
      <view class="page-search">
        <fui-input v-model="searchValue" color="#333" radius=16 :borderBottom="false" placeholderStyle="font-size:28rpx" placeholder="请输入公司名称搜索" @blur="searchCenter"></fui-input>
        <span class="icon iconfont" @click="searchCenter">&#xe628;</span>
      </view>
      <view class="filter-wrapper">
        <view class="filter-item" :class="{'active': curType === item.value}" v-for="item in typeList" :key="item.value" @click="handleChangeType(item.value)">{{ item.name }}</view>
      </view>
    </view>
    <view class="supplier-list">
      <fui-checkbox-group v-show="listData.length" name="checkbox" v-model="checkedSupplierIds" @change="onChangeSupplier">
        <fui-label class="supplier-item" v-for="item in listData" :key="item.id + ''">
          <fui-checkbox v-if="!checkAllType" scaleRatio="0.8" :value="item.id + ''" :disabled="disabledSelect"></fui-checkbox>
          <view class="supplier-item-right">
            <view class="right-title">{{ item.companyName }}</view>
            <view class="right-list">
              <view class="right-text">
                统一信用代码 <span class="right-value">{{ item.creditCode }}</span>
              </view>
              <view class="right-text">
                上架商品数量 <span class="right-number">{{ item.goodsCount || 0 }}</span><span>个</span>
              </view>
            </view>
          </view>
        </fui-label>
      </fui-checkbox-group>
      <fui-loadmore :state="moreState"></fui-loadmore>
      <fui-empty v-show="!listData.length" :isFixed="true" src="/static/images/empty/data.png" title="暂无可选供应商" size="24" color="#999"></fui-empty>
    </view>
    <view class="ui-fixed-footer ui-fixed-footer__white">
      <view class="selector-all-list">
        <view class="selector-all-item" :style="{'opacity': disabledSelect ? 0.8 : 1}" @click="handleCheckAll('direct')">
          <fui-icon name="checkbox-fill" size="40" v-if="checkAllType === 'direct'" color="var(--fui-color-primary)"></fui-icon>
          <fui-icon name="checkround" size="40" v-else color="#ddd"></fui-icon>
          <fui-text text="全部直供" size="24" color="#666"></fui-text>
        </view>
        <view class="selector-all-item" :style="{'opacity': disabledSelect ? 0.8 : 1}" @click="handleCheckAll('self')">
          <fui-icon name="checkbox-fill" size="40" v-if="checkAllType === 'self'" color="var(--fui-color-primary)"></fui-icon>
          <fui-icon name="checkround" size="40" v-else color="#ddd"></fui-icon>
          <fui-text text="全部自营" size="24" color="#666"></fui-text>
        </view>
      </view>
      <fui-button class="ui-btn-primary_plain" text="取消" height="78rpx" radius="8rpx" :margin="['0', '54rpx', '0', '0']" @click="tab.navigateBack"></fui-button>
      <fui-button text="确定" height="78rpx" radius="8rpx" :margin="['0']" @click="handleSubmit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, inject } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import couponApi from '@/api/coupon'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const couponId = ref('')
const disabledSelect = ref(false)
const checkedSupplierIds = ref([])
const listData = ref([])
const onChangeSupplier = (e) => {
  checkedSupplierIds.value = e.detail.value
}

// 全选
const checkAllType = ref('')
const handleCheckAll = (type) => {
  if (disabledSelect.value) return
  if (!checkAllType.value) {
    checkAllType.value = type
  } else if (checkAllType.value === type) {
    checkAllType.value = ''
  } else {
    checkAllType.value = type
  }
}

onLoad(option => {
  couponId.value = option.couponId
  disabledSelect.value = option.disabledEdit == 1
  checkedSupplierIds.value = store.getters.couponSupplier
  if (checkedSupplierIds.value.indexOf('-1') > -1) {
    checkAllType.value = 'direct'
  } else if (checkedSupplierIds.value.indexOf('-2') > -1) {
    checkAllType.value = 'self'
    curType.value = 'Y'
  } else {
    checkAllType.value = ''
  }
  getSupplierList()
})

// 搜索
const searchValue = ref('')
const searchCenter = () => {
  getSupplierList()
}

// 供应商类型
const curType = ref('N')
const typeList = [
  { name: '直供', value: 'N' },
  { name: '自营', value: 'Y' },
]
const handleChangeType = (type) => {
  curType.value = type
  getSupplierList()
}

// 保存
const handleSubmit = () => {
  if (!checkAllType.value && !checkedSupplierIds.value.length) {
    modal.msgError('请至少选择一个供应商！')
    return
  }
  if (checkAllType.value) {
    checkedSupplierIds.value = checkAllType.value === 'self' ? ['-2'] : ['-1']
  } else {
    checkedSupplierIds.value = Array.from(new Set(checkedSupplierIds.value))
  }
  store.commit('SET_COUPON_SUPPLIER', checkedSupplierIds.value)
  tab.navigateBack()
}

// 可选供应商
const moreState = ref(1)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  useStatus: '1'
})
const getSupplierList = () => {
  uni.stopPullDownRefresh()
  try {
    queryParams.value.isSelfManage = curType.value
    queryParams.value.companyName = searchValue.value
    modal.loading('加载中...')
    couponApi.getCheckSupplierList(queryParams.value).then((res) => {
      modal.closeLoading()
      if(res.code === 0){
        const newData = res.data && res.data.list ? res.data.list : []
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else{
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.closeLoading()
    modal.msgError(err.msg || err || '获取供应商列表失败！')
  }
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getSupplierList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...')
    moreState.value = 2
    queryParams.value.pageNo++
    getSupplierList()
  }
})
</script>

<style lang="scss" scoped>
.page-coupon-supplier {
  padding: 36rpx 36rpx 186rpx;
  .page-fixed-top {
    position: fixed;
    left: 36rpx;
    right: 36rpx;
    .page-search {
      :deep(.fui-input__wrap) {
        padding: 20rpx 24rpx !important;
      }

      span {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        font-size: 1.25rem;
        color: var(--fui-color-link);
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 40rpx;
        color: var(--fui-color-link);
      }
    }
    
    .filter-wrapper {
      display: flex;
      background: #ffffff;
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      margin-top: 24rpx;
      padding: 28rpx !important;
      .filter-item {
        border-radius: 24rpx;
        background-color: #f5f7fe;
        line-height: 48rpx;
        margin-right: 24rpx;
        padding: 0 32rpx;
        font-size: 24rpx;
        &.active {
          background-color: var(--fui-color-primary);
          color: #fff;
        }
      }
    }
  }

  .supplier-list {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx 28rpx 0 !important;
    box-sizing: border-box;
    margin-top: 164rpx;
    .supplier-item {
      display: flex;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 28rpx !important;
      box-sizing: border-box;
      &:not(:last-child) {
        border-bottom: 2rpx solid #f1f1f1;
      }

      .fui-checkbox__input {
        margin-right: 24rpx;
      }

      .supplier-item-right {
        width: calc(100% - 188rpx);
        .right-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 16rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .right-list {
          display: flex;
          flex-wrap: wrap;
          .right-text {
            width: 100%;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            white-space: nowrap;

            image {
              padding-right: 10rpx;
            }

            span {
              color: #333333;
            }
            .right-value {
              margin-left: 10rpx;
            }
            .right-number {
              font-weight: bold;
              color: #2c83fc;
              padding: 0 10rpx;
            }
          }
        }
      }
    }
  }
  .ui-fixed-footer {
    display: flex;
    align-items: center;
    .selector-all-list {
      display: flex;
      align-items: center;
      .selector-all-item {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        .fui-icon {
          margin-right: 5rpx;
        }
      }
    }
    .fui-button__wrap {
      margin:0 0 0 20rpx !important;
    }
  }
}
</style>